<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			//$(":checkbox[value=101]").click(xxxx);
		</script>
		<script>
			$(function() {
				//实现全选全不选
				var all = false;
				$('#obtn').click(function() {
					if ($(":checkbox:checked").length == $(":checkbox").length) {
						$(":checkbox").prop("checked", false);
					} else {
						$(":checkbox").prop("checked", true);
					}
				});
				//实现子项的全选全不选
				$("h2 input").click(function() {
					if ($(this).prop("checked")) {
						$(this).parent().next().children().prop("checked", true);
					}else{
						$(this).parent().next().children().prop("checked", false);
					}
				});
				$("p").children().click(
					function() {
						let len=$(this).parent().find(":checked").length;
						$(this).parent().prev().find(":checkbox").prop("checked", len>0);
						// if ($(this).prop("checked")) {
						// 	$(this).parent().prev().find(":checkbox").prop("checked", true);
						// }
						// else if ((!$(this).prop("checked")) && (!$(this).siblings().prop("checked"))) {
						// 	$(this).parent().prev().find(":checkbox").prop("checked", false);
						// }
						
					}
				);
			});
		</script>
		<title>无标题文档</title>
	</head>

	<body>
		<div id="menu">
			<h2><input type="checkbox" name="role" value="101" />系统管理</h2>
			<p>
				<input type="checkbox" name="role" value="101001" />用户管理
				<input type="checkbox" name="role" value="101002" />参数管理
				<input type="checkbox" name="role" value="101003" />权限管理
				<input type="checkbox" name="role" value="101004" />日常管理
				<input type="checkbox" name="role" value="101005" />财务管理
			</p>
			<hr />
			<h2><input type="checkbox" name="role" value="102" />鲜花订单管理</h2>
			<p>
				<input type="checkbox" name="role" value="102032" />增加订单
				<input type="checkbox" name="role" value="102013" />订单发货
				<input type="checkbox" name="role" value="102015" />在线结算
				<input type="checkbox" name="role" value="102016" />原料管理
			</p>
			<hr />
			<h2><input type="checkbox" name="role" value="103" />客户管理</h2>
			<p>
				<input type="checkbox" name="role" value="103032" />增加用户
				<input type="checkbox" name="role" value="103032" />查找用户
				<input type="checkbox" name="role" value="103012" />用户维护
				<input type="checkbox" name="role" value="103012" />生日祝贺
				<input type="checkbox" name="role" value="103012" />删除用户
			</p>

			<hr />
			<h2><input type="checkbox" name="role" value="104" />任务管理</h2>
			<p>
				<input type="checkbox" name="role" value="104032" />增加任务
				<input type="checkbox" name="role" value="104032" />指定用户
				<input type="checkbox" name="role" value="104012" />取消维护
				<input type="checkbox" name="role" value="104012" />任务结算
				<input type="checkbox" name="role" value="104012" />删除任务
			</p>
		</div>
		<p>
			<input type="button" id="obtn" value="全选" />
			<input type="submit" value="提交" />
			<input type="reset" id="nbtn" value="重置" />
		</p>
		<hr />

		<p>
			1:实现 全选 全不选 功能（通过点击 全选 按钮）<br />
			2：选中h2中的大项，对应后面的小项 全部选中；取消选中，则小项全部取消；<br />
			3:选中小项，则其对应的大项选中，如果小项都未选中，则大项不选。<br />
			4：不能采用固定value 的方式，比如$(":checkbox[value=1001]")这样的格式
		</p>
	</body>
</html>
